<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="40%"
      :before-close="handleClose"
      :close-on-click-modal="false"
      :show-close="true"
    >
      <!-- <template slot-scope="scope"> -->
      <template>
        <!-- <div style="margin-bottom:15px;"> -->
        <div style="position: relative; bottom: 15px">
          <span style="font-size: 20px">应用系统: </span>
          <span style="font-size: 20px; color: #acaaaa">{{ Belonging }}</span>
          <span style="font-size: 20px; margin-left: 30px">角色: </span>
          <span style="font-size: 20px; color: #acaaaa">{{
            Administrator
          }}</span>
        </div>
      </template>
      <el-transfer
        v-model="value"
        :data="data"
        :titles="['资源列表', '已选资源']"
        :button-texts="['移除', '添加 ']"
        @change="changeEvent"
      >
      </el-transfer>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Visible" style="margin-right: 10px">取 消</el-button>
        <el-button type="primary" @click="Visible">保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    // 控制打开弹出层
    dialogVisible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    // const generateData = () => {
    //   // 获取到的数据
    //   const data = [];
    //   for (let i = 1; i <= 15; i++) {
    //     data.push({
    //       // 所有的选项
    //       key: i,
    //       // 要展示的选项
    //       label: `资源 ${i}`,
    //       // 可以被四整除的数，禁选的选项
    //       disabled: i % 4 === 0,
    //     });
    //   }
    //   return data;
    // };
    return {
      Belonging: "凯睿平台",
      Administrator: "凯睿平台管理员",
      // 穿梭框数据 上面是循环生成，下面是模仿传入
      // data: generateData(),
      data: [
        {key:1,label:`资源 ${1}`,disabled:true},
        {key:2,label:`资源 ${2}`,disabled:false},
        {key:3,label:`资源 ${3}`,disabled:false},
        {key:4,label:`资源 ${4}`,disabled:false},
        {key:5,label:`资源 ${5}`,disabled:false},
        {key:6,label:`资源 ${6}`,disabled:false},
        {key:7,label:`资源 ${7}`,disabled:false},
      ],
      // 已有的资源
      value: [1, 4, 7],
    };
  },
  methods: {
    // 关闭弹出层
    Visible() {
      this.$emit("dialogVisible", false);
    },
    handleClose() {
      this.$confirm("确认关闭？")
        .then(() => {
          this.Visible();
        })
        .catch(() => {});
    },
    // 已有资源发生变化时触发
    changeEvent(res) {
      console.log(res, "已有的资源");
    },
  },
};
</script>

<style scoped>
/* 穿梭框的移除 */
/* ::v-deep .el-transfer__button:first-child {
  display: none;
} */
::v-deep .el-button + .el-button {
  margin-left: 0;
}
::v-deep .el-transfer-panel {
  width: 40%;
}
::v-deep .el-transfer__buttons {
  width: 20%;
  padding: 0;
  text-align: center;
}
::v-deep .el-dialog__footer {
  text-align: center;
}
::v-deep .el-dialog__header {
  display: none;
}
</style>